<template>
  <div v-if="false" class="page">
    <div class="calculator">
      <!--      <div class="display">4561</div>-->
      <div class="btn">C</div>
      <div class="btn">+/-</div>
      <div class="btn">%</div>
      <div class="btn">÷</div>
      <div class="btn">7</div>
      <div class="btn">8</div>
      <div class="btn">9</div>
      <div class="btn">×</div>
      <div class="btn">4</div>
      <div class="btn">5</div>
      <div class="btn sex">6</div>
      <div class="btn">-</div>
      <div class="btn">1</div>
      <div class="btn">2</div>
      <div class="btn">3</div>
      <div class="btn">+</div>
      <div class="btn zero">0</div>
      <div class="btn">.</div>
      <div class="btn">=</div>
    </div>
  </div>

  <div class="grid">
    <template v-for="item in 45" :key="item">
      <div class="item" :class="'item'+item">{{ item }}</div>
    </template>
  </div>

</template>

<style lang="scss">
@import "assets/reset.scss";
$grid-width: 600px;

.grid {
  margin: 20px;
  display: grid;
  width: $grid-width;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  grid-auto-rows: minmax(50px, auto);

  .item {
    width: $grid-width/9;
    background: red;
    border: 1px solid #000;
    color: #FFF;
    padding: 5px;
    text-align: center;
    justify-self: start;
    align-self: center;
  }
  @for $i from 1 through (9-1)
  {
    .item#{$i*($i+1)/2}
    {
      grid-column-start: $i;
      grid-column-end: 10;
    }
  }
}

.page {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.calculator {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin: 0 auto;
  font-size: 36px;
  width: 90vw;
  max-width: 450px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(auto, auto);
  text-align: center;

  div {
    padding: 5px;
  }

  .btn {
    border: 1px solid #eee;
  }

  .zero {
    grid-column: 1 / span 2;
  }

  .display {
    font-size: 32px;
    padding: 10px 5px;
    grid-column: 1 / 5;
    background-color: #000000;
    color: #FFFFFF;
  }
}

</style>
